import { useState, useEffect, useRef } from "react";
import { Row, Col, Timeline, Divider,Button,Space ,Modal} from "antd";
import { CheckCircleOutlined,WarningOutlined,PlayCircleOutlined } from "@ant-design/icons";
import Variable from './Variable.jsx'
import CamundaAPI from "@/api/CamundaApi.js";
import Detail from "@/components/Detail.jsx";
import TaskHis from './TaskHis.jsx'

function ProcessInstanceDetail(props) {
  const processInstanceId = props.procInstId;
  const [processInstanceEntity, setProcessInstanceEntity] = useState({});
  const detail = useRef([]);
  
  useEffect(() => {
    CamundaAPI.queryProcessInstanceDetailByInstanceId(processInstanceId).then(
      (r) => {
        detail.current = [
          { key: "ID", value: r.result.processInstanceId },
          { key: "Start Time", value: r.result.processInstanceStartTime },
          { key: "Business Key", value: r.result.businessKey },
          { key: "End Time", value: r.result.processInstanceEndTime },
          { key: "State", value: r.result.state },
        ];
        setProcessInstanceEntity(r.result);
      }
    );
  }, []);






  return (
    <div style={{ display: "flex",paddingTop:'16px' }}>
      {/* {JSON.stringify(processInstanceEntity)} */}

      <div style={{ flex: "1 1 65%" }}>

        
        <Detail column={1} data={detail.current}></Detail>


        {
                processInstanceEntity&& (processInstanceEntity.state === 'NORMAL' || processInstanceEntity.state === 'SUSPEND') ? processInstanceId && processInstanceId!='' ? <Variable type="ProcessInstance" dataId={processInstanceId}></Variable> :null:null
            }
        
      </div>
      <div style={{ flex: "1 1 5%" }}></div>
      <div style={{ flex: "0 0 30%" }}>
        <TaskHis processInstanceId={processInstanceId}></TaskHis>

        
      </div>




      


    </div>
  );
}

export default ProcessInstanceDetail;
